<template>
  <div class="outbound-list">
    <!-- 顶部工具栏 -->
    <div class="toolbar">
      <div class="left-buttons">
        <el-button @click="goToNewOutbound">新增</el-button>
        <el-button>删除</el-button>
        <el-button>还原</el-button>
        <el-button>导入</el-button>
        <el-button>导出</el-button>
        <el-button>查看日志</el-button>
      </div>
    </div>

    <!-- 搜索表单 -->
    <div class="search-form">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="关联项目：">
          <el-input v-model="searchForm.project" placeholder="" class="input-with-search">
            <template #append>
              <el-button :icon="Search" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="申请人员：">
          <el-input v-model="searchForm.applicant" placeholder="请选择申请人" class="input-with-search">
            <template #append>
              <el-button :icon="Search" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="出库类型：">
          <el-select v-model="searchForm.outboundType" placeholder="全部">
            <el-option label="全部" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="出库确认时间：">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="-"
            start-placeholder=""
            end-placeholder=""
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
      </el-form>

      <el-form :inline="true" :model="searchForm">
        <el-form-item label="出库主题：">
          <el-input v-model="searchForm.subject" style="width: 300px;" />
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格标题 -->
    <div class="table-title">
      出库确认列表
    </div>

    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40" />
      <el-table-column label="序号" type="index" width="60" />
      <el-table-column prop="subject" label="出库确认主题" min-width="300">
        <template #default="scope">
          <span 
            class="clickable-subject" 
            @click="goToDetail(scope.row)"
          >
            {{ scope.row.subject }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="outboundType" label="出库申请单" min-width="300" />
      <el-table-column prop="type" label="出库类型" width="120" />
      <el-table-column prop="relatedProject" label="关联项目" width="150" />
      <el-table-column prop="manager" label="出库库管" width="100" />
      <el-table-column prop="confirmTime" label="出库确认时间" width="150" />
      <el-table-column prop="quantity" label="确认出库数量" width="120" align="right" />
      <el-table-column prop="status" label="发货状态" width="100">
        <template #default="scope">
          <el-tag
            :type="scope.row.status === '待发货' ? 'warning' : 'success'"
          >
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template #default="scope">
          <el-button link type="primary" size="small">申请发货</el-button>
          <el-button 
            link 
            type="primary" 
            size="small" 
            @click="goToNewOutbound(scope.row)"
          >修改</el-button>
          <el-button 
            link 
            type="primary" 
            size="small" 
            @click="goToNewOutbound(scope.row)"
          >复制新增</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <span class="page-info">第</span>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[50]"
        :small="true"
        layout="sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <span class="page-info">页，共 2 页</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Search, ArrowDown } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 搜索表单数据
const searchForm = ref({
  project: '',
  applicant: '',
  outboundType: '',
  dateRange: [],
  subject: ''
})

// 表格数据
const tableData = ref([
  {
    id: '1',
    subject: '采购干果进货',
    outboundType: '采购干果进货',
    type: '采购进货出库',
    relatedProject: '',
    manager: '张研',
    confirmTime: '2025-04-01',
    quantity: -18,
    status: '待发货'
  },
  {
    id: '2',
    subject: '转自生产领料：纯白聚苯外保温板 聚苯生产门窗 数控器器材料',
    outboundType: '转自生产领料：纯白聚苯外保温板 聚苯生产门窗 数控器器材料',
    type: '领料出库',
    relatedProject: '',
    manager: '张研',
    confirmTime: '2025-04-01',
    quantity: 41,
    status: '待发货'
  },
  {
    id: '3',
    subject: '转自生产领料：聚苯生产门窗 数控器器材料',
    outboundType: '转自生产领料：聚苯生产门窗 数控器器材料',
    type: '领料出库',
    relatedProject: '',
    manager: '张研',
    confirmTime: '2025-04-01',
    quantity: 3,
    status: '待发货'
  }
])

// 分页
const currentPage = ref(1)
const pageSize = ref(50)
const total = ref(54)

// 选择行
const handleSelectionChange = (val: any[]) => {
  console.log('选中的行：', val)
}

// 跳转到详情页面
const goToDetail = (row: any) => {
  // 将当前行数据序列化为JSON字符串，并添加详情标记
  const rowData = encodeURIComponent(JSON.stringify({
    ...row,
    viewMode: 'detail' // 添加详情标记
  }))
  
  // 跳转并携带id和序列化后的行数据
  router.push({
    path: '/warehouse/outbound-detail',
    query: { 
      id: row.id,
      data: rowData,
      mode: 'detail' // 添加模式标记
    }
  })
}

// 跳转到新增出库确认页面
const goToNewOutbound = (row?: any) => {
  const query: any = { id: 'new' }
  
  // 如果传入了行数据，则序列化后传递
  if (row) {
    query.data = encodeURIComponent(JSON.stringify(row))
  }
  
  router.push({
    path: '/warehouse/outbound-confirmation-new',
    query
  })
}



// 分页处理
const handleSizeChange = (val: number) => {
  pageSize.value = val
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
}
</script>

<style scoped>
.outbound-list {
  padding: 0 10px;
  background-color: #fff;
}

.toolbar {
  padding: 8px 0;
  border-bottom: 1px solid #ddd;
}

.left-buttons {
  display: flex;
  gap: 5px;
}

.left-buttons .el-button {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 2px;
}

.search-form {
  padding: 15px 0;
}

.search-form .el-form {
  margin-bottom: 10px;
}

.search-form .el-form-item {
  margin-bottom: 10px;
  margin-right: 15px;
}

.search-form .el-form-item__label {
  font-size: 12px;
}

.input-with-search {
  width: 200px;
}

.table-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}

.el-table {
  font-size: 12px;
}

.el-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: normal;
  padding: 8px 0;
}

.pagination {
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 15px;
}

.page-info {
  font-size: 12px;
  color: #606266;
  margin: 0 5px;
}

.clickable-subject {
  color: #409EFF;
  cursor: pointer;
  text-decoration: none;
}

.clickable-subject:hover {
  text-decoration: underline;
}

:deep(.el-table .cell) {
  white-space: nowrap;
}

:deep(.el-input__wrapper) {
  border-radius: 2px;
}

:deep(.el-button) {
  border-radius: 2px;
}
</style>